<template>
	<view class="scroll-wrap" :style="{backgroundColor: bc ? bc : null}" ref="container">
		<image :src="bg" class="bg"></image>
		<scroll-view
			scroll-x="ture" 
			show-scrollbar="false"
			enable-flex="true"
			class="scrollContainer"
		>
			<!-- #ifdef H5 || MP-WEIXIN -->
			<view style="display: inline-block;		height: 406rpx;">
				<product-item-three 
					ref="item"
					class="item"
					:style="{marginLeft: index == 0 ? '16rpx' : null}"
					v-for="(item, index) in list"
					:key="item.productClusterId"
					:src="item.thumbnail"
					:dSrc="item.promotions ? item.promotions[0].picturesUrl : null"
					:title="item.title"
					:titleLabel="item.promotions ? item.promotions[0].label : null"
					:discount="item.discount"
					:originalPrice="item.originalPriceString ? '¥' + item.originalPriceString : null"
					:price="item.priceString ? '¥' + item.priceString : null"
					:entrance="item.entrance"
				/>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef APP-PLUS -->
			<product-item-three
				ref="item"
				class="item"
				:style="{marginLeft: index == 0 ? '16rpx' : null}"
				v-for="(item, index) in list"
				:key="item.productClusterId"
				:src="item.thumbnail"
				:dSrc="item.promotions ? item.promotions[0].picturesUrl : null"
				:title="item.title"
				:titleLabel="item.promotions ? item.promotions[0].label : null"
				:discount="item.discount"
				:originalPrice="item.originalPriceString ? '¥' + item.originalPriceString : null"
				:price="item.priceString ? '¥' + item.priceString : null"
				:entrance="item.entrance"
			/>
			<!-- #endif -->
			
			<view class="moreItem" @tap="navigate(moreEntrance)">
				<text class="moreItemFirstText">查看全部</text>
				<text class="moreItemText">SEE MORE</text>
			</view>
			
			<!-- #ifdef H5 || MP-WEIXIN -->
			<view style="width: 1rpx; height: 16rpx; background-color: transparent;"></view>
			<!-- #endif -->
			
		</scroll-view>
	</view>
</template>


<script>
	import { mapActions } from 'vuex';
	import {parsePath} from '../utils/index.js'
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	
	export default {
		props: ['list', 'bg', 'bc', 'moreEntrance'],
		methods: {
			...mapActions(["addUserCartListAsync"]),
			navigate(entrance) {
				const url = parsePath(entrance)
				uni.navigateTo({
					url
				})
			},
			addToCart(item) {
				console.log('加入购物车...')
				this.addUserCartListAsync({pId: item.productClusterId})
			}
		}
	}
</script>

<style>
	.scroll-wrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		position: relative; 
		height: 436rpx; 
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.bg {
		position: absolute;
		top: 0;
		left: 0; 
		width: 750rpx; 
		height: 436rpx;
	}
	.scrollContainer {
		/* #ifdef H5 || MP-WEIXIN */
		width: 100%;
		display: flex;
		white-space: nowrap;
		/* #endif */
		/* #ifdef APP-PLUS */
		width: 750rpx;
		align-items: center;
		/* #endif */
		flex-direction: row;
		flex-wrap: nowrap;
		height: 406rpx;
	}
	.itemWrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: inline-block;
		height: 406rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 406rpx;
		/* #endif */
	}
	.item {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		height: 406rpx;
		display: inline-block;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 406rpx;
		/* #endif */
		flex-direction: column;
		align-items: flex-start;
		width: 220rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-right: 10rpx;
		position: relative;
		overflow: hidden;
	}
	.itemImg {
		width: 220rpx; 
		height: 220rpx; 
		border-top-left-radius: 10rpx; 
		border-top-right-radius: 10rpx;
	}
	.itemTitle {
		margin: 10rpx;
	}
	.itemMiddleWrap {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		flex-direction: column; 
		flex: 1; 
		margin-left: 10rpx; 
		margin-right: 10rpx;
	}
	.itemDiscountWrap {
		line-height: 24rpx; 
		margin-bottom: 5rpx;
	}
	.itemOriginalPriceWrap {
		line-height: 24rpx;
	}
	.itemPrice {
		margin-left: 10rpx; 
		margin-right: 10rpx;
	}
	.addCartBtn {
		width: 44rpx; 
		height: 44rpx;
	}
	
	.moreItemWrap {
		/* #ifdef H5 || MP-WEIXIN */
		/* display: inline-block; */
		/* #endif */
		margin-right: 16rpx;
	}
	.moreItem {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		height: 406rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 406rpx;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-right: 16rpx;
	}
	.moreItemText {
		font-size: 28rpx;
		width: 220rpx;
		text-align: center;
	}
	.moreItemFirstText {
		font-size: 28rpx;
		border-bottom-width: 6rpx;
		border-bottom-color: red;
		border-bottom-style: solid;
		padding-left: 6rpx;
		padding-right: 6rpx;
		padding-bottom: 6rpx;
		margin-bottom: 6rpx;
	}
</style>
